<template>
  <div class="city-medical-container">
    <div class="city-medical-main">
      <main-map
        :init-layer="initLayer"
        @on-load="mapLoad"
        @timeline-layer-load="timelineLoad"
      >
        <!-- <map-switcher
          v-if="mapLoadOk"
          :style="{ right: '20px' }"
          class="switcher transition-box map-widget"
        /> -->
        <div
          v-if="mapLoadOk"
          class="compass"
          @click="setBearing"
          v-show="visible"
        >
          <svg-icon class="" :icon-class="'compass'"></svg-icon>
        </div>
        <template v-if="mapLoadOk && timelineLoadShow && timeLineLayers.length">
          <map-toolbar
            @visible="changeVisible"
            :timeLineLayers="timeLineLayers"
          />
          <!-- <map-timeline @changeTimeLine="handelChangeTimeLine"/> -->

          <map-legend
            @changeStyle="changeStyle"
            :timeLineLayers="timeLineLayers"
          />
          <building-filter
            ref="buildingFilter"
            :timeLineLayers="timeLineLayers"
          />
          <map-theme
            :layers="timeLineLayers"
            @changeColor="handleChangeColor"
            @reset="handleReset"
            v-show="visible"
          ></map-theme>
        </template>
        <div class="spaceSearchDom" ref="spaceSearchDom"></div>
      </main-map>
    </div>
  </div>
</template>

<script>
import mainMap from '@v/main-map'
// import mapTimeLine from "@c/map/components/map-timeline";
import mapLegend from '@c/map/components/map-legend'
// import mapSwitcher from '@c/map/components/map-switcher';
import mapToolbar from '@c/map/components/map-toolbar'
import mapTheme from '@c/map/components/map-theme'
import buildingFilter from './component/buildingFilter.vue'
import MapToolbar from '../../components/map/components/map-toolbar.vue'
// import request from "@u/request";
export default {
  name: 'Home',
  provide() {
    const self = this
    return {
      get map() {
        return self.map
      },
      get timeLineLayers() {
        return self.timeLineLayers
      },
      get spaceSearchDom() {
        return self.$refs.spaceSearchDom
      },
    }
  },
  components: {
    'main-map': mainMap,
    'map-toolbar': mapToolbar,
    // "map-timeline": mapTimeLine,
    'map-legend': mapLegend,
    'building-filter': buildingFilter,
    // mapSwitcher,
    MapToolbar,
    mapTheme,
  },
  data() {
    return {
      visible: true,
      mapLoadOk: false, // 地图load是否完成
      timelineLoadShow: false, // 时间轴地图是否加载完成
      map: null,
      initLayer: window.BULIDING_LAYERS, // 城市体检默认初始化图层
      timeLineIndex: [
        '居住',
        '办公',
        '商业',
        '医疗',
        '科教',
        '体育',
        '文化',
        '工业',
        '交通',
        '市政',
        '社福',
        '其他',
      ],
      timeLineLayers: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      currentStyle: {
        id: window.BULIDING_LAYERS[0].id,
        style: window.BULIDING_LAYERS[0].style,
      },
    }
  },
  watch: {},
  mounted() {
    console.log('ditu', this.initLayer)
  },
  methods: {
    changeVisible(val) {
      this.visible = val
    },
    setBearing() {
      this.map.setBearing(0)
      this.map.setPitch(0)
    },
    // 地图加载完成
    mapLoad(e) {
      this.map = e.target
      // console.log('this.map', this.map);
      this.mapLoadOk = true
    },
    timelineLoad() {
      // console.log("1 :>> ", 1);
      this.timelineLoadShow = true
      // 获取所有图层
      this.map.getStyle(window.TIMELINE_STYLE_NAME).layers.forEach((i) => {
        // console.log('i :>> ', i);
        this.timeLineLayers.splice(this.timeLineIndex.indexOf(i.id), 1, i)
      })
      this.setStorageColor()
    },
    setStorageColor() {
      const layers = JSON.parse(localStorage.getItem(this.currentStyle.id))
      if (layers) {
        this.timeLineLayers.splice(0, this.timeLineLayers.length, ...layers)
        layers.forEach((i) => {
          this.map.setPaintProperty(
            i.id,
            'fill-extrusion-color',
            i.paint['fill-extrusion-color']
          )
        })
      }
    },
    handleChangeColor(layers) {
      this.timeLineLayers.splice(0, this.timeLineLayers.length, ...layers)
      localStorage.setItem(
        this.currentStyle.id,
        JSON.stringify(this.timeLineLayers)
      )
      this.setStorageColor()
    },
    handleReset() {
      this.map.getStyle(window.TIMELINE_STYLE_NAME).layers.forEach((i) => {
        this.timeLineLayers.splice(this.timeLineIndex.indexOf(i.id), 1, i)
      })
      this.handleChangeColor(this.timeLineLayers)
      // request.get(this.currentStyle.style).then((res) => {
      //   this.handleChangeColor(res.layers.reverse());
      // });
    },
    handelChangeTimeLine() {
      this.$refs.buildingFilter.reset()
    },
    changeStyle(newStyle, oldStyleid) {
      if (this.map.getStyle(oldStyleid)) {
        this.map.removeStyle(oldStyleid)
      }
      this.map.addStyle(newStyle.id, newStyle.style, {
        onload: (res) => {
          // 雪碧图
          console.log('res :>> ', res)
          this.map.addSprite(res.sprite, () => {
            console.log('添加雪碧图成功')
          })
          console.log(res)
          this.currentStyle.id = newStyle.id
          this.currentStyle.style = newStyle.style
          // 将对应的图例保存在item.legendControl
          this.timeLineLayers = res.layers.reverse()
          this.setStorageColor()
          // 添加成功
          // console.log(res)
          // this.map.flyTo({
          //   center: res.center,
          //   zoom: res.zoom,
          // })
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.city-medical-container {
  height: 100%;
  width: 100%;
  position: relative;
  // display: flex;
  .city-medical-aside {
    width: 100%;
    height: 100%;
  }
  .city-medical-main {
    width: calc(100%);
    height: 100%;
  }
  .spaceSearchDom {
    position: absolute;
    right: 10px;
    top: 60px;
    min-width: 200px;
    padding: 10px;
    min-height: 10px;
    background: #fff;
    display: none;
  }
}
.compass {
  position: absolute;
  right: 10px;
  top: 43px;
  font-size: 50px;
}
</style>
